import Vue from 'vue'
import VueRouter from 'vue-router'
//导入登录子组件
import Login from '../components/Login.vue'
import Home from '../components/Home.vue'
import Welcome from '../components/Welcome.vue'
import Users from '../components/users/Users.vue'
import Rights from "../components/power/Rights.vue"
import Rolse  from "../components/power/Roles.vue"
import Cate from "../components/goods/Cate.vue"
import Params from "../components/goods/Params.vue"
import Goods from "../components/goods/List.vue"
import Add from "../components/goods/Add.vue"

Vue.use(VueRouter)

const routes = [
  //将根路径重定向到登录url
  { path: '/', redirect: "login" },
  //注册登录子组件 路由规则
  { path: '/login', component: Login },
  { path: '/home', component: Home, redirect :'/welcome',
    children: [
    {path:'/welcome',component:Welcome},
    {path:'/users',component:Users},
    {path:'/rights',component:Rights},
    {path:'/roles',component:Rolse},
    {path:'/categories',component:Cate},
    {path:'/params',component:Params},
    {path:'/goods',component:Goods},
    {path:'/goods/add',component:Add},
  ]
},
]

//创建路由管理器 对象 并传入 路由规则数组
const router = new VueRouter({
  routes
})


//挂载路由导航守卫 目的 减少不必要的请求 

//实现思路 
//1在路由管理器中可以添加beforeEach的处理函数
//2在每次修改url后 路由管理器 会根据url 子组件 如果注册了beforeEach 那么会在找子组件之前 先调用beforeEach
//2.1 在beforeEach 中 如果通过业务校验 则调用next()根据当前url找子组件并渲染
//2.2 在beforeEach中 如果未通过业务校验 则调用next(新url)去根据新url找子组件并渲染

//注册路由守卫 在路由管理器 根据url找子组件之前运行
// (就是路由管理器中的一个方法 根据url找子组件之前执行 如果守卫内部 调用next() 就会根据当前url找子组件 如果收尾内部调用 next('/login)就会找/login对应的子组件 )
router.beforeEach((to, from, next) => {
  //next()根据当前url找子组件
  if (to.path === '/login') return next()
  const tokenStr = window.sessionStorage.getItem('token')
  //next(新url)根据新url找子组件
  if (!tokenStr) return next('/login')
  //放行                                 
  next()
})


//导入路由管理器
export default router
